/**********************************  OVERRIDE ***************************************************************/

body, html {overflow-x:hidden}
body {color:black}
html {scroll-behavior: smooth;}

h1, h2, h3, h4, h5, h6 {margin-bottom:10px; line-height:1.5; color: var(--Primary); font-weight:bold; font-family:  Arial, Helvetica, sans-serif!important }
p {margin-bottom:0!important; font-family:  Arial, Helvetica, sans-serif!important}
a {font-family:inherit!important; color:inherit!important}

b, strong {font-weight: 700!important;}
img {max-width:100%}
main div.container, main div.container-fluid, main div.container-lg, main div.container-md, main div.container-sm, main div.container-xl {margin-bottom: 0!important}

.form-control:focus {color: #444; background-color: #fff; border-color: color:  var(--Primary);  outline: 0;  box-shadow: none;}

.d-flex img {align-self: center;}

.anchor {padding-top: 120px; margin-top: -120px;   display: inline-block;}


/*************************************  COLOURS ***************************************************************/

:root {
  --light-grey: #f8f8f8; 
  --grey: #e7e7e7; 
  --dark-grey: #555555;
  --text: black;
  --Primary: rgb(98, 169, 205);
 /* --Primary: rgb(0,51,161);*/
  
  --MaxWidth: 1400px;

}

.PrimaryText {color: var(--text)!important;}

.btn-white {background-color: white;  border-color: var(--Primary)!important; color: var(--Primary)!important;}
.btn-white a {color: var(--Primary)!important;}
.btn-white:hover {background-color: var(--Primary);  border-color: var(--Primary)!important; color: white!important;}
.btn-white:hover a {color: white!important;}
.btn-blue {background-color:var(--Primary)!important; border-color: var(--Primary)!important; color: white!important;}
.btn-blue a {color: white!important;}
.btn-blue:hover {background-color: white!important;	border-color: var(--Primary)!important;}
.btn-blue:hover a, .btn-blue:hover {color: var(--Primary)!important;}
.btn-transparent {background-color: transparent!important; color: white!important; border-color: white!important;}
.btn-transparent:hover {background-color:var(--Primary)!important; border-color: var(--Primary)!important;}
.btn-transparent:hover {background-color: white!important; border-color: var(--Primary)!important;}
.btn-transparent:hover a {color: var(--Primary)!important;}
.btn-submit {background-color: transparent; color: white; border-color: white;}

.footerbg {background-color:var(--Primary)!important;}
footer * {color:white!important}
.lightgreyBG {background-color:var(--light-grey)}
.greyBG {background-color:var(--grey)}

/* cookie consent */
.cc-compliance a {color: var(--Primary)!important;}

/********************************** END COLOURS ****************************************************/

/**********************************  GENERIC *****************************************************/

.Desktop {display:none}
.Tablet {display:none}
.Mobile {display:block}

.Left {justify-content:flex-start}

.Onclick *:hover {cursor: pointer;}

.MaxWidth {max-width:var(--MaxWidth); margin:0 auto}

/***  OUT OF DATE BROWSER ***/
.buorg {background-color: rgb(var(--Primary))!important; box-shadow:none!important; border-bottom-color: transparent!important} /* background colour*/
.buorg-mainmsg, .buorg-moremsg {color:white!important} /* text colour */
#buorgul {background-color: rgb(var(--light-grey))!important} /* button colour */
#buorgig {background-color:white!important; color:black!important} /* button colour */
/** **/
 
.grow { transition: all .3s ease-in-out; }
.grow:hover { transform: scale(1.05); }

#dnn_BannerPane img {width:100%}


/********************************** CONTAINERS **************************************************/

/*** BUTTONS ***/
.button {
    padding: 5px 25px;
    border-radius: 10px;
    color: white;
	font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    transition: background-color linear 0.2s;
    -webkit-transition: background-color linear 0.2s;
    background-color: transparent;
    margin: 10px;
    border: 1px solid;
    text-align: center;
    line-height: 1.5;
}
.btn-left {margin-left:0}

/*** BUTTON END ***/

/*** RESPONSIVE VIDEO ***/

.VideoBannerOuter {position: relative; height:calc(100vw * 270.0 / 800.0); min-height: 20rem; width: 100%; overflow: hidden;}
.VideoBanner {    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.VideoBanner video {width: 100%; height: 100%; z-index: -1;}
.VideoBanner {position: relative;}
.VideoBanner .content-ss {position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; background-color: #00000052;}
.VideoBanner .Caption {display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; text-align: center;}
.VideoBanner .Caption div {white-space:nowrap}
.VideoBanner .Caption h2, .VideoBanner .Caption h4 {color:white}
.VideoBanner .Caption .CaptionL {font-size:3rem; margin-bottom:0; line-height: 93.6px; font-style: italic; font-weight:500;}
.VideoBanner .Caption .CaptionR {font-size:3.9rem; margin-bottom:0; line-height: 93.6px; font-style: italic; font-weight:500;}

.BannerImg {   position: relative;}
.BannerImg img { width: 100%;}
.BannerImg .content-ss {position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; background-color: #00000052;}
.BannerImg .Caption {display: flex; flex-direction: column; justify-content: center; align-items: center;   margin: 0 auto; text-align: center; }
.BannerImg .Caption div {white-space:nowrap}
.BannerImg .Caption h2, .BannerImg .Caption h4 {color:white}
.BannerImg .Caption h2 {font-size:2rem}
.BannerImg .Caption h4 {font-size:1.2rem; line-height:1.2}

/**/
.VideoWrapper-outer {max-width: 100%; margin: 0 auto;}
.VideoWrapper {position: relative; padding-bottom: 56.25%; height: 0;}
.VideoWrapper iframe {position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;    border: 0;}

/*** VIDEO END ***/

.AboutUs {}
.AboutUs ul {padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; width: 80%;}
.AboutUs ul li {float:left; list-style-type: none;  position: relative; color: var(--Primary); margin: 10px;}
.AboutUs ul li span {padding-left: 35px; display: block; text-align: left;}
.AboutUs ul li:before {
    content:'';
    position: absolute;
    left: 0px;
    top: 0px;
    height: 25px;
    width: 25px;
	background-image: url(/Portals/0/Icon-tick.png);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.RotatorContainer {display: flex; justify-content: center;}
.RotatorContainer .RotatorImg {position: relative;}
.RotatorContainer .RotatorImg img {width: 100%;}
.RotatorContainer .RotatorImg .Rotatorcontent-ss {display: flex; top: 55%; right: 0%;  left: 0%;  bottom: 0%;  overflow: hidden;  margin-bottom: -50px;
justify-content: center; min-height:250px}
.RotatorContainer .RotatorImg .Rotatorcontent-ss .RotatorCaption {
	display: inline-block; width: 100%;  margin-bottom: 10px;  background-color: white; padding: 40px 40px 10px 40px; min-height:240px}
	
.PDFs {display: flex; align-items: center; padding-top:10px; padding-bottom:10px}
.PDFs a {flex-basis: 75px; min-width: 75px;}
.PDFs p {padding-left:20px}	
.PDFs img {flex-basis: 50px;}
	
/*  NAV */
#dnn_Search {position: fixed;  z-index:999; bottom: 0;  left: 0;   right: 0;  background-color: var(--light-grey);   height: 50px; display: flex; justify-content: flex-end; align-items: center;
padding-right: 25px; box-shadow: var(--BoxShadow)}
.navbar {padding:0;}	
.HeaderWrapper #dnn_dnnLOGO_imgLogo {padding: 10px; transition: all linear 0.2s;  -webkit-transition: all linear 0.2s; max-height: 130px;}
.HeaderWrapper.sticky #dnn_dnnLOGO_imgLogo {max-height: 100px;}

nav button[type=button] {background-color:transparent; border:0 none; cursor:pointer; -webkit-border-radius: 0px;  border-radius: 0px; outline:0 }
nav button[type=button]:focus {background-color:transparent; outline:0; color: transparent; -webkit-border-radius: 0px;  border-radius: 0px; outline:0}
nav .dropdown-menu {border:0}

.OpticoDropdown {display: none; border-top: 1px solid silver;}
.OpticoDropdown ul {margin:0; padding:0}
.OpticoDropdown ul li {list-style-type: none; }
.TopCategory {display:flex; height:100%; }
.TopCategory > .content {border-right: 1px solid silver; padding: 10px; flex: 0 0 auto;}
.TopCategory > .content li {padding-bottom:15px; font-weight:bold; position:relative}
.TopCategory > .content li:hover {color: var(--Primary)}
.TopCategory > .content li:hover:after {}
.SubCategory {display:flex; flex-direction:column;}
.SubCategory > .content {padding: 10px;}
.SubCategory .content > ul {list-style: none; position: relative; margin: 0;   padding: 0; display:static}
.SubCategory .content > ul > li {font-weight:bold; padding-right:20px}
.SubCategory .content > ul li ul {padding-left:20px; padding-right:20px}
li.level1:hover {position:relative}
li.level1:hover:after {font-family: 'Font Awesome 5 Free';
    content: '\f0da';
    display: block;
    position: absolute;
    top: 0;
    right: -20px;}
.level2 a {font-weight:bold}
.level3 a {font-weight:normal}

.SubCategory .content > ul {display:flex!important; flex-direction: column;  flex-wrap: wrap; height:320px}
.level2 {position:relative}
.level2 ul {display:none!important; position: absolute; top: 0; left: 100%;}
.level2:hover ul {display:flex!important}
.level3 {padding: 0 20px; white-space: nowrap;}

.SubCategory .content > ul {}



/* */

#dnn_contactL div {height:100%}


ul.list {display: inline-block; float: left; padding-left:0 }
ul.list li {list-style-type: none;    position: relative; margin-top: 5px; margin-bottom: 5px;}
ul.list li span {padding-left: 35px; display: block; text-align: left;}
ul.list li:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f06e';
    position: absolute;
    left: 0px;
    top: 0px;
    height: 30px;
    width: 30px;
	color: var(--Primary);
}


.slideIn {-webkit-animation-name: slideIn;  animation-name: slideIn;}


/* ANIAMTION */
.animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}


@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}



/********************  FOOTER  *******************************************/

#dnn_FooterPaneFour img {padding-bottom:10px}



/********************************  MEDIA QUERIES ********************************/


/* Touch Screen Devices */
@media (hover: none) {
	
li.level1:hover:after {
    content: '';
    
}


}

/*  SAFARI */
@media not all and (min-resolution:.001dpcm) {
    @media {
		
		
		
	}
}	
	

@media (min-width: 768px) /* Tablet Vertical - Medium col-md */{ 

.RotatorContainer {}
.RotatorContainer .RotatorImg .Rotatorcontent-ss {}
.RotatorContainer .RotatorImg .Rotatorcontent-ss .RotatorCaption {width: 100%;}

.VideoBannerOuter {height:calc(100vw * 270.0 / 800.0); min-height: 25rem; }

.TopCategory > .content, .SubCategory > .content  {padding:20px}

.SubCategory .content > ul {height:180px}
.level2[data-parent="Anterior"] {flex: 0 0 14%;}

}




@media (min-width: 992px) /* Tablet Landscape - Large col-lg */{ 
.Mobile {display:none}
.Tablet {display:block}

/* Desktop Nav */
#dnn_Search {position: static; background-color:transparent; padding-right:0; box-shadow: none}
.OpticoDropdown {height: 220px;}
.TopCategory > .content {padding: 20px 50px 20px 20px;}
.SubCategory > .content {padding: 20px 20px 20px 50px;}
.SubCategory .content > ul {display: flex; /*justify-content: space-between;*/ flex-wrap: wrap;}
.SubCategory .content > ul li ul {padding-left:0px; padding-right:20px}

.RotatorContainer {margin-bottom: 60px;}
.RotatorContainer .RotatorImg .Rotatorcontent-ss {position: absolute;}
.RotatorContainer .RotatorImg .Rotatorcontent-ss .RotatorCaption {width: 80%;  box-shadow: var(--BoxShadow);  -webkit-box-shadow: var(--BoxShadow);}

}

@media (min-width: 1200px) /* LAPTOP Extra Large col-xl */{ 
.Tablet {display:none}
.Desktop {display:block}



}


@media (min-width: 1400px) /* DESKTOP Extra Extra Large col-xxl */{ 





}